<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
  <!-- BEGIN: Head-->
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google.">
    <meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template, eCommerce dashboard, analytic dashboard">
    <meta name="author" content="ThemeSelect">
    <title>生态圈系统-已领取优惠券</title>
    <link rel="icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="apple-touch-icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="css/bootstrap.min.css" th:href="@{/css/bootstrap.css}" type="text/css" rel="stylesheet"/>
    <!-- BEGIN: VENDOR CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/vendors.min.css" th:href="@{/app-assets/vendors/vendors.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/flag-icon/css/flag-icon.min.css" th:href="@{/app-assets/vendors/flag-icon/css/flag-icon.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/css/jquery.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/css/jquery.dataTables.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/css/select.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/css/select.dataTables.min.css}">
    <!-- END: VENDOR CSS-->
    <!-- BEGIN: Page Level CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-gradient-menu-template/materialize.css" th:href="@{/app-assets/css/themes/vertical-gradient-menu-template/materialize.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-gradient-menu-template/style.css" th:href="@{/app-assets/css/themes/vertical-gradient-menu-template/style.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/pages/data-tables.css" th:href="@{/app-assets/css/pages/data-tables.css}">
    <!-- END: Page Level CSS-->
    <!-- BEGIN: Custom CSS-->
    <link href="plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" th:href="@{/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css}" type="text/css" rel="stylesheet"/>
    <link href="plugins/bootstrap-sweetalert/sweetalert.css" th:href="@{/plugins/bootstrap-sweetalert/sweetalert.css}" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/custom/custom.css" th:href="@{/app-assets/css/custom/custom.css}">
    <!-- END: Custom CSS-->
  </head>
  <!-- END: Head-->
  <body class="vertical-layout page-header-light vertical-menu-collapsible vertical-gradient-menu 2-columns" data-open="click" data-menu="vertical-gradient-menu" data-col="2-columns">

    <!-- BEGIN: Header-->
    <div th:replace="common/header :: header"></div>
    <!-- END: Header-->

    <div th:replace="common/aside_admin :: aside"></div>

    <!-- BEGIN: Page Main-->
    <div id="main">
      <div class="row">
        <div class="pt-3 pb-1" id="breadcrumbs-wrapper">
          <!-- Search for small screen-->
          <div class="container">
            <div class="row">
              <div class="col s12 m6 l6">
                <h5 class="breadcrumbs-title mt-0 mb-0" id="page-title" active-menu="coupon-obtainment-menu">已领取优惠券</h5>
              </div>
              <div class="col s12 m6 l6 right-align-md hide">
                <ol class="breadcrumbs mb-0">
                  <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                  <li class="breadcrumb-item"><a href="#">Pages</a></li>
                  <li class="breadcrumb-item active">Blank Page</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="col s12">
          <div class="container">
            <div class="section section-data-tables">
              <div class="row">
                <div class="col s12 m12 l12">
                  <div id="button-trigger" class="card card card-default scrollspy">
                    <div class="card-content">
                      <div class="row">
                        <div class="col s12">
                          <form id="search">
                            <div class="row" style="margin-bottom: 0;">
                              <div class="input-field col s2">
                                <select name="activityId">
                                  <option value="" selected>全部</option>
                                  <option th:each="a : ${activities}" th:value="${a.id}"  th:text="${a.title}" th:selected="${a.id} == ${search.activityId}"></option>
                                </select>
                                <label>权益</label>
                              </div>
                              <div class="input-field col s2">
                                <input type="text" name="couponCode" id="coupon_code" th:value="${search.couponCode}">
                                <label for="coupon_code">验证码</label>
                              </div>
                              <div class="input-field col s2">
                                <a th:href="'javascript:search();'" class="waves-effect waves-light btn-floating search-btn"><i class="material-icons right">search</i></a>
                              </div>
                              <div class="input-field col s4">
                              </div>
                              <div class="input-field col s2">
                                <a class="waves-effect waves-light btn light-blue darken-1 white-text" href="javascript:exportObtainmentCoupons();" style="bottom: -5px; margin-left: 60px;"><i class="material-icons right"></i>导出</a>
                              </div>
                            </div>
                          </form>
                        </div>
                        <div class="col s12">
                          <table id="data-table-simple" class="display nowrap">
                            <thead>
                              <tr>
                                <th>权益</th>
                                <th>客户号</th>
                                <th>验证码</th>
                                <th>密码</th>
                                <th>领取时间</th>
                                <th>生效日期</th>
                                <th>失效日期</th>
                              </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot class="hide">
                              <tr>
                                <th>权益</th>
                                <th>客户号</th>
                                <th>验证码</th>
                                <th>密码</th>
                                <th>领取时间</th>
                                <th>生效日期</th>
                                <th>失效日期</th>
                              </tr>
                            </tfoot>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END: Page Main-->

    <!-- BEGIN: Footer-->

    <div th:replace="common/footer :: footer"></div>

    <!-- END: Footer-->

    <div th:replace="common/update_pwd :: #modal3"></div>

    <!-- BEGIN VENDOR JS-->
    <script src="../../../app-assets/js/vendors.min.js" th:src="@{/app-assets/js/vendors.min.js}" type="text/javascript"></script>
    <!-- BEGIN VENDOR JS-->
    <!-- BEGIN PAGE VENDOR JS-->
    <script src="../../../app-assets/vendors/data-tables/js/jquery.dataTables.min.js" th:src="@{/app-assets/vendors/data-tables/js/jquery.dataTables.min.js}" type="text/javascript"></script>
    <script src="../../../app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js" th:src="@{/app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js}" type="text/javascript"></script>
    <script src="../../../app-assets/vendors/data-tables/js/dataTables.select.min.js" th:src="@{/app-assets/vendors/data-tables/js/dataTables.select.min.js}" type="text/javascript"></script>
    <!-- END PAGE VENDOR JS-->
    <!-- BEGIN THEME  JS-->
    <script src="../../../app-assets/js/plugins.js" th:src="@{/app-assets/js/plugins.js}" type="text/javascript"></script>
    <script src="../../../app-assets/js/custom/custom-script.js" th:src="@{/app-assets/js/custom/custom-script.js}" type="text/javascript"></script>
    <!-- END THEME  JS-->
    <!-- BEGIN PAGE LEVEL JS-->
    <script src="../../../app-assets/js/scripts/data-tables.js" th:src="@{/app-assets/js/scripts/data-tables.js}" type="text/javascript"></script>
    <!-- END PAGE LEVEL JS-->
    <script src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" th:src="@{/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
    <script src="plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js" th:src="@{/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}" charset="UTF-8"></script>
    <script src="plugins/bootstrap-sweetalert/sweetalert.min.js" th:src="@{/plugins/bootstrap-sweetalert/sweetalert.min.js}"></script>
    <script src="js/common.js" th:src="@{/js/common.js}"></script>
    <script th:inline="javascript">
      $(document).ready(function() {
        var dataTableSimple = $('#data-table-simple').DataTable({
          "responsive": false,
          "language": language,
          "ordering": false,
          "serverSide": true, //启用服务器端分页
          "pagingType": "simple_numbers",
          "ajax": function(data, callback, settings) {
            //封装请求参数
            var param = {};
            param.size = data.limit;//页面显示记录条数，在页面显示每页显示多少项的时候
            //param.start = data.start;//开始的记录序号
            param.page = data.page;//当前页码
            //console.log(data);
            //console.log(param);
            //ajax请求数据
            $.ajax({
              url: context_path + "/api/v2/coupons/services/obtainmentQuery?page=" + (data.start ? (data.start / data.length) : 0),
              contentType: "application/json;charset=utf-8",
              type: "POST",
              headers: {
                Accept: "application/json"
              },
              dataType: "json",
              data: '{"couponCode": "' + $("#search input[name='couponCode']").val() + '",'
                  + ' "activityId": "' + $('#search select[name="activityId"]').val() + '",'
                  + ' "page": ' + (data.start ? (data.start / data.length) : 0) + ','
                  + ' "size": 10' + '}',
              success: function(result) {
                //封装返回数据
                var returnData = {};
                //returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                returnData.recordsTotal = result.totalElements;//返回数据全部记录
                returnData.recordsFiltered = result.totalElements;//后台不实现过滤功能，每次查询均视作全部结果
                returnData.data = result.content;//返回的数据列表
                //console.log(returnData);
                //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                callback(returnData);
              }
            });
          },
          "columns": [
        	  { "data": "activityTitle" },
              { "data": "customerNumber" },
              { "data": "couponCode" },
              { "data" : "secretCode" },
              { "data" : function(row, type, val, meta) {
                  if (row.obtainTime) {
                    return dateFormat(row.obtainTime, "yyyy-MM-dd hh:mm");
                  }
                  return "";
                }
              },
              { "data" : "effectiveTime" },
              { "data" : "expirationTime" }
          ]
        });
      });

      function search() {
        //console.log($("#search").serialize());
        window.location.href = "obtainments?" + formParamsSerialize($("#search").find('input, select'));
      }

      function exportObtainmentCoupons() {
        window.location.href = context_path + "/api/v1/coupons/obtainments/export?" + formParamsSerialize($("#search").find('input, select'));
      }
    </script>
  </body>
</html>
